import React from "react";
import { Route, NavLink, Switch, Redirect } from "react-router-dom";

import Header from "./components/Header";
import Home from "./pages/Home/index";
import About from "./pages/About";
import Help from "./pages/Help";

function App() {
  return (
    <div className="app">
      <Header a="1" b="2" />
      <div className="main">
        <div className="left">
          <NavLink className="link" to="/home" activeClassName="hello">
            Home
          </NavLink>
          <NavLink className="link" to="/about" activeClassName="hello">
            About
          </NavLink>
          <NavLink className="link" to="/help" activeClassName="hello">
            Help
          </NavLink>
        </div>
        <div className="right">
          {/* 
            Route 组件的三种写法
              1. component
              2. render       (props) => {}
              3. children

            注意事项：
              1. 三者不能混合使用，选择一个即可
              2. render 或 children 的时候，需要主动传递 props 下去。
          */}
          <Switch>
            {/* 1. component */}
            <Route path="/home" component={Home} />
            {/* 2. render */}
            <Route
              path="/about"
              render={(props) => {
                console.log(props, "!!");
                return <About {...props} />;
              }}
            />
            {/* 3. children */}
            {/* <Route path="/help">
              {(props) => {
                return <Help {...props} />;
              }}
            </Route> */}
            <Route
              path="/help"
              children={(props) => {
                return <Help {...props} />;
              }}
            />
          </Switch>
        </div>
      </div>
    </div>
  );
}

export default App;
